<template>
  <div class="user-page">
    <div class="user-table-card">
      <h2>用户管理</h2>
      <el-table :data="users" border style="width: 100%; margin-top: 18px; min-width: 100%;">
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="role" label="权限" align="center" />
        <el-table-column label="操作" align="center" width="100">
          <template #default="{ $index }">
            <el-button size="small" type="danger" @click="onDelete($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" style="margin-top: 18px;" @click="onAdd">+ 新增用户</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const users = ref([
  { username: 'admin', role: '管理员' },
  { username: 'user1', role: '普通用户' },
  { username: 'user2', role: '普通用户' }
])
function onDelete(idx) {
  users.value.splice(idx, 1)
}
function onAdd() {
  // 新增逻辑，可弹窗或跳转
  alert('新增用户')
}
</script>

<style scoped>
.user-page {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  background: none;
  min-height: 100vh;
}
.user-table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 40px 48px;
  width: 100%;
  max-width: none;
  margin: 48px 40px 0 40px;
  box-sizing: border-box;
}
.user-table-card h2 {
  margin-bottom: 32px;
  color: #34495e;
  font-weight: 600;
  text-align: center;
}
</style>